<template>
  <div class="container">
    <div v-for="n in 100" :key="n">
      <heavy-comp v-if="defer(n)"></heavy-comp>
    </div>
  </div>
</template>

<script setup>
import HeavyComp from '../components/HeavyComp.vue'
/* 100个重复组件 优化的思路为延迟渲染 先渲染自己看到的部分*/
import { useDefer } from '../composables/useDefer'
const defer = useDefer(100)

</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:1em;
}
</style>